<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>管理员登录</title>
    <link rel="stylesheet" href="./res/layui/css/layui.css">
    <style>
        *{
            border-radius: 0 !important;
        }
        .login-box{
            margin-top: 150px;
        }
        .login-panel{
            padding:10px;
            background: #fff;
        }
    </style>
</head>
<body class="layui-bg-gray">
    <!--导航条-->
    <ul class="layui-nav layui-bg-gray">
        <li class="layui-nav-item">
            <a href="#" class="layui-logo">
                <img src="./res/images/logo.png" height="50px" alt="">
            </a>
        </li>
    </ul>

    <!--登录/注册框-->
    <div class="layui-container login-box">
        <div class="layui-row">
            <div class="layui-col-md4 layui-col-md-offset4 login-panel">
                <div class="layui-tab layui-tab-brief">
                   <ul class="layui-tab-title">
                       <li class="layui-this">管理员登录</li>
                   </ul>
                    <div class="layui-tab-content">
                        <!--登录tab-->
                        <div class="layui-tab-item layui-show">
                            <form class="layui-form layui-form-pane">
                                <div class="layui-form-item">
                                    <label  class="layui-form-label">
                                        <i class="layui-icon layui-icon-username"></i>
                                    </label>
                                    <div class="layui-input-block">
                                        <input type="text" name="username" class="layui-input" placeholder="请输入账号" required lay-verify="required" lay-vertype="tips" lay-reqtext="请输入账号">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label  class="layui-form-label">
                                        <i class="layui-icon layui-icon-password"></i>
                                    </label>
                                    <div class="layui-input-block">
                                        <input type="password" name="password" class="layui-input" placeholder="请输入密码" required lay-verify="required" lay-vertype="tips" lay-reqtext="请输入密码" autocomplete="off">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                     <button type="submit" class="layui-btn layui-btn-normal layui-btn-fluid"  lay-submit lay-filter="formLogin">登录</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="text-align: center;margin-top: 10px;">&copy;软帝集团</div>
    </div>

    <script src="./res/layui/layui.js"></script>
    <script>
        layui.use(['form', 'layer', 'jquery'], function(){
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;

            form.on('submit(formLogin)', function(data) {
                var field = data.field; // 获取表单字段值
                
                // 发送登录请求
                $.ajax({
                    url: '/admin/login',
                    type: 'GET',
                    data: field,
                    success: function(R) {
                        if (R.code === 200) {
                            // 登录成功，存储管理员信息到localStorage
                            if (R.data) {
                                localStorage.setItem('adminId', R.data.id || '1');
                                localStorage.setItem('adminName', R.data.username || '');
                                // 更新主页面登录名称
                                // 延迟执行，确保页面已跳转
                                setTimeout(function() {
                                    if (window.parent && window.parent.document) {
                                        var loginName = window.parent.document.getElementById('loginName');
                                        if (loginName) {
                                            loginName.textContent = R.data.username || '管理员';
                                        }
                                    }
                                }, 500);
                            }
                            
                            layer.msg(R.message || '登录成功', function() {
                                location.href = 'main.html';
                            });
                        } else {
                            layer.msg(R.message || '登录失败，请检查账号密码', {icon: 5});
                        }
                    },
                    error: function() {
                        layer.msg('网络错误，请稍后重试', {icon: 5});
                    }
                });
                
                return false; // 阻止默认表单提交
            });
        });
    </script>
</body>
</html>